<template>
	<view class="myldz">
		<u-navbar bgColor="#fff">
			<view slot="left" class="align-center">
				<image @click="$tools.back()" src="@/static/login/back3.png" style="width: 36rpx; height: 36rpx"></image>
			</view>
			<view slot="center">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333">详情</view>
			</view>
		</u-navbar>
		<view class="">
			<view class="align-center" style="padding: 20rpx">
				<view style="margin-right: 40rpx">
					<image :src="obj.image" style="width: 192rpx; height: 192rpx"></image>
				</view>
				<view class="">
					<view class="align-center" style="margin-bottom: 12rpx">
						<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-right: 20rpx">{{ obj.name }}</view>
						<view style="font-size: 24rpx; color: #63c802; padding: 2rpx 20rpx; background: #ffffff; border-radius: 8rpx; border: 1rpx solid #63c802">
							余{{ obj.num - obj.useNum }}
						</view>
					</view>
					<view style="font-weight: 300; font-size: 24rpx; color: #999999; margin-bottom: 16rpx">{{ obj.num }}张 | {{ obj.size }}m²</view>
				</view>
			</view>
		</view>
		<view style="background: #f5f6fa; padding: 20rpx 32rpx; min-height: 100vh">
			<view class="flex" v-for="(item, index) in obj.bedList" :key="index" style="padding: 20rpx; background-color: #fff; margin-bottom: 20rpx">
				<view style="margin-right: 28rpx">
					<image :src="item.userInfo.head" style="width: 196rpx; height: 240rpx" mode="aspectFill"></image>
				</view>
				<view style="flex: 1">
					<view class="flex-between1">
						<view class="align-center">
							<view style="font-weight: 600; font-size: 32rpx; color: #333333">{{ item.userInfo.name }}</view>
							<!-- <u-icon @click.stop.native="" name="file-text" color="#1365F9" size="44"></u-icon> -->
						</view>
						<view class="align-center">
							<view
								@click="$tools.playphone(item.userInfo.phone)"
								class="flex-center1"
								style="margin-right: 20rpx; width: 56rpx; height: 56rpx; background: #1365f9; border-radius: 8rpx"
							>
								<u-icon name="phone-fill" color="#fff" size="40"></u-icon>
							</view>
							<view
								@click="
									show = true;
									roominfo = item;
									userInfo = item.userInfo;
								"
								class="flex-center1"
								style="width: 126rpx; height: 56rpx; background: #1365f9; border-radius: 8rpx; font-size: 24rpx; color: #ffffff"
							>
								入住信息
							</view>
						</view>
					</view>
					<view style="font-weight: 300; font-size: 24rpx; color: #999999; padding: 14rpx 0">{{ item.userInfo.sex == 1 ? '男' : '女' }} | {{ item.userInfo.age }}岁</view>
					<view class="flex" style="margin-bottom: 30rpx">
						<view style="margin-right: 20rpx; padding: 8rpx 20rpx; font-weight: 400; background: #f8f8f8; border-radius: 8rpx; font-size: 24rpx; color: #666666">
							{{ item.userInfo.height }}cm
						</view>
						<view style="margin-right: 20rpx; padding: 8rpx 20rpx; font-weight: 400; background: #f8f8f8; border-radius: 8rpx; font-size: 24rpx; color: #666666">
							{{ item.userInfo.weight }}kg
						</view>
					</view>
					<view style="font-weight: 400; font-size: 24rpx; color: #333333">入住日期：{{ item.userInfo.updateTime }} {{ item.name }}</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" round="20">
			<view style="padding: 32rpx; max-height: 80vh; overflow: auto">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 24rpx">入住信息</view>
				<view style="font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 24rpx">劳动者信息</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>真实姓名:</text>
					<text>{{ userInfo.name }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>性别:</text>
					<text>{{ userInfo.sex == 1 ? '男' : '女' }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>出生日期:</text>
					<text>{{ userInfo.birthDate }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>年龄:</text>
					<text>{{ userInfo.age }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>身份证号:</text>
					<text>{{ userInfo.idcard }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>婚姻状况:</text>
					<text>{{ userInfo.marital }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>现住址:</text>
					<text>{{ userInfo.address }}</text>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>联系电话:</text>
					<text>{{ userInfo.phone }}</text>
				</view>
				<view style="font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 24rpx">住宿信息</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>房型名称:</text>
					<text>{{ roominfo.userName }}</text>
				</view>
				<view style="margin-bottom: 40rpx">
					<view style="margin-bottom: 20rpx">*床位名称:</view>
					<view class="flex-wrap">
						<view class="text1" style="margin-right: 20rpx">{{ roominfo.name }}</view>
					</view>
				</view>
				<view class="flex-between1" style="margin-bottom: 40rpx">
					<text>开始时间:</text>
					<text>{{ roominfo.updateTime }}</text>
				</view>
				<!-- <view class="flex-between1" style="margin-bottom: 40rpx">
					<text>备注:</text>
					<text>11</text>
				</view> -->
				<view class="flex-between1">
					<view
						@click="show = false"
						class="flex-center1"
						style="font-size: 32rpx; color: #1365f9; width: 220rpx; height: 96rpx; background: #ffffff; border-radius: 8rpx; border: 2rpx solid #1365f9"
					>
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <view class="box">
			<image @click="$tools.navigite('./sdtj')" src="@/static/mine/add.png" style="width: 148rpx; height: 148rpx"></image>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			obj: {},
			list: [],
			roominfo: {},
			userInfo: {},
			show: false
		};
	},
	onLoad(option) {
		this.id = option.value;
		this.init();
	},
	methods: {
		init() {
			this.$request('front/home/roomDetail', { id: this.id }).then((res) => {
				console.log(res.obj, 'res');
				this.obj = res.obj;
			});
		}
	}
};
</script>

<style lang="less" scoped>
.myldz {
	padding-top: 180rpx;
	.text1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #1365f9;
	}
	.text2 {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.box {
		position: fixed;
		bottom: 100rpx;
		right: 32rpx;
	}
}
</style>
